<script setup>
import {ref} from "vue";
import {deleteCourseStudent, listCourseClass, listCourseStudent, moveCourseClass} from "../../../api/course/course.js";
import {CirclePlus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const student = ref([]);
const courseId = ref(0);
courseId.value = localStorage.getItem("courseId");


// 查询课程所有班级
const handleListCourseStudent = async () => {
  await listCourseStudent(courseId.value).then(res => {
    student.value = res.data;
    console.log(student.value);
  })
}

// 当前的按钮
const currentButton = ref('');
// 当前悬停的行的索引
const hoveredRowIndex = ref(null);

// 鼠标悬停事件
const handleMouseOver = (index, icon) => {
  currentButton.value = icon;
  hoveredRowIndex.value = index;
  handleListClassTable();
};

// 鼠标离开事件
const handleMouseLeave = () => {
  currentButton.value = '';
  hoveredRowIndex.value = null;
};

// 删除学生
const handleDeleteStudent = async (studentId, classId) => {
  console.log(studentId);
  await deleteCourseStudent(studentId, classId).then(res => {
    ElMessage.success("删除学生成功");
    handleListCourseStudent();
  })
}
// 移动学生班级
const handleMoveClass = async (studentId,classId) => {
 await moveCourseClass({studentId:studentId,classId:classId}).then(()=>{
   ElMessage.success("移动学生班级成功")
   handleListCourseStudent();
 })
}
// 查询课程所有班级
const classTable = ref([]);
// 查询分班列表
const handleListClassTable = async () => {
  await listCourseClass(courseId.value).then(res => {
    classTable.value = res.data;
    console.log(classTable.value);
  })
}
handleListCourseStudent();

</script>

<template>
  <el-table :data="student">
    <el-table-column type="index" label="序号" width="100"/>
    <el-table-column prop="username" label="姓名"/>
    <el-table-column prop="no" label="学号"/>
    <el-table-column prop="className" label="分班"/>
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-dropdown :hide-on-click="false">
          <el-icon style="width: 100px;"
                   @mouseover="handleMouseOver(scope.$index,'move')"
                   @mouseleave="handleMouseLeave"
                   @click="handleMoveClass(scope.row.id)"
                   :class="{ 'hovered': hoveredRowIndex === scope.$index && currentButton=== 'move'}">
            <div style="display: flex;align-items: center;">
              <CirclePlus/>
              <span>移动分班</span>
            </div>
          </el-icon>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in classTable" @click="handleMoveClass(scope.row.id,item.id)">{{ item.className }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>


        <el-icon style="width: 100px;"
                 @mouseover="handleMouseOver(scope.$index,'delete')"
                 @mouseleave="handleMouseLeave"
                 @click="handleDeleteStudent(scope.row.id,scope.row.classId)"
                 :class="{ 'delete': hoveredRowIndex === scope.$index && currentButton==='delete'}">
          <div style="display: flex;align-items: center;">
            <span>删除</span>
          </div>
        </el-icon>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="less">
.hovered {
  color: #41a4f6; /* 悬停时的颜色，可以根据需要调整 */
}

.delete {
  color: #f56c6c;
}
</style>